<!doctype html>
<html>
<head>
  <script src="./js/config.js"></script>
  <meta charset="utf-8">
  <title>报警日志</title>
  <style>
    body{font-family:Arial,Helvetica,sans-serif;margin:40px}
    .nav{margin-bottom:20px}
    .nav a{margin-right:15px;font-weight:bold}
    pre{background:#f4f4f4;padding:10px;border:1px solid #ccc;white-space:pre-wrap;word-break:break-all;}
  </style>
</head>
<body>
<div class="nav">
  <a href="index.html">🏠 返回首页</a>
</div>
<h2>报警日志</h2>
<button onclick="clearLog()">清空日志</button>
<pre id="log"></pre>

<script>

async function loadLog(){
  const txt = await fetch(BASE+'/api/log').then(r=>r.text());
  document.getElementById('log').textContent = txt;
}
async function clearLog(){
  if(!confirm('确定清空？')) return;
  await fetch(BASE+'/api/clear_log', {method:'POST'});
  loadLog();
}

loadLog();
setInterval(loadLog, 5000);
</script>
</body>
</html>
